<template>
    <div class="check">
        <div class="check-box">
            <div class="check-box-left">
                <div>申请人信息</div>
                <div style="margin-top:20px;">姓名：<span>{{ checkData.username }}</span></div>
                <div class="check-box-left-info">
                    <p>部门：<span>{{ checkData.departmentName }}</span></p>
                    <p style="margin-left: 20%;">入职时间：<span>{{ checkData.timeOfEntry }}</span></p>
                </div>
            </div>

            <overtime v-if="type == 2" :checkDataItem="checkDataItem"></overtime>
            <leave v-else-if="type == 1" :checkDataItem="checkDataItem" :checkData="checkData"></leave>
            <vacation v-if="type == 3" :checkDataItem="checkDataItem"></vacation>
        </div>


        <div class="check-box-right" style=" padding: 30px;">
            <div>审批记录</div>
            <div>
                <div style="height:250px; margin-top: 30px;; max-width: 100%">
                    <el-steps style="font-size: 13px;" direction="vertical" align-center :active="3"
                        finish-status="success" >
                        <el-step v-for="item in DataFlow"  :key="item.id"  >
                            <template #icon>
                               <img  style="width: 20px; height: 20px;" src="@/assets/icon/对号.svg"/>
                            </template>
                            <template #title>
                                <div>
                                   {{ item.handleOpinion }}
                                </div>
                            </template>
                            <template #description>
                                {{ item.handleTime }}
                            </template>
                        </el-step>
                    </el-steps>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
import { ref } from 'vue';

import { getApprovalDetail, getDataFlow } from "@/api/examineApi/examineApi.js"
import { useRoute, useRouter } from 'vue-router';
import overtime from "./components/overtime.vue"
import leave from "./components/leave.vue"
import vacation from "./components/vacation.vue"
let route = useRoute()
let type = ref(1)  //1 请假  2 加班  3 离职
let checkData = ref({})
let checkDataItem = ref({})
getApprovalDetail(route.query.id).then(res => {
    checkDataItem.value = JSON.parse(res.data.procData)
    console.log(checkDataItem.value);

    checkData.value = res.data
    if (res.data.processKey == "process_leave") {
        type.value = 1
    } else if (res.data.processKey == "process_overtime") {
        type.value = 2
    } else if (res.data.processKey == "process_dimission") {
        type.value = 3
    }
})

let DataFlow = ref([])
getDataFlow(route.query.id).then(res => {
    console.log(res);
    DataFlow.value = res.data

})


</script>

<style scoped lang="scss">
p {
    margin: 0;
    padding: 0;
}

.check {
    display: flex;
}

.check-box {
    padding: 20px;
    background-color: #fff;
    width: 80%;

    .check-box-left {
        margin-top: 20px;
        border-bottom: 2px solid #dcdfe6;
        color: #646a73;
        font-size: 14px;

        .check-box-left-info {
            display: flex;
            margin-top: 5px;
            padding-bottom: 20px;

            span {
                font-size: 16px;
                margin-left: 5px;
                color: #000
            }

        }

    }
}

.check-box-right {
    background: #fff;
    margin-left: 10px;
    width: 25%;
}

// ::v-deep .el-step__head.is-success {
//   color: rgb(52, 158, 250);
//   border-color: rgb(52, 158, 250);
// }
// ::v-deep .el-step__title.is-success {
//     font-weight: bold;
//     color: rgb(52, 158, 250);
// }
// ::v-deep .el-step__description.is-success {
//     color: rgb(52, 158, 250);
// }
// .stepsStyle{
//    width: 100%;
//    ::v-deep{

//      .el-step__title.is-process,.el-step__title.is-wait{
//        color: #fff !important;
//      }
//      .el-step__head.is-process,.el-step__heads.is-wait{
//        .el-step__icon.is-text{//这里设置的是下一步和等待状态里的文字颜色
//          color: #C0C4CC !important;
//          border-color: #C0C4CC !important;
//        }
//      }
//      .el-step__head.is-finish{
//        color: orange !important;
//        .el-step__icon.is-text{//这里设置的是已完成状态里的文字颜色
//          color: orange !important;
//          border-color: orange !important;
//        }
//      }
//      .el-step__title.is-finish{
//        color: orange !important;
//      }
//      .el-step__line-inner{//这里设置的是完成后过渡线条颜色
//        border-color: orange !important;
//      }
//      .el-step__head.is-success,.el-step__title.is-success{//这里设置的是完成后的颜色
//        color: orange !important;
//      }
//    }
//  }</style>